<script setup lang="ts">
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
import Navbar from "@/components/Navbar.vue";

const router = useRouter();
const navItems = [
  { id: "songs", name: "歌曲推荐", path: "/discover/songs" },
  { id: "playlists", name: "歌单推荐", path: "/discover/playlist" },
  { id: "artists", name: "音乐人推荐", path: "/discover/artists" },
];

const activeTab = ref(navItems[0]);

watch(activeTab, (newValue) => {
  if (newValue) {
    router.push(newValue.path);
  }
});
</script>

<template>
  <div class="discover-container">
    <div class="max-w-7xl mx-auto p-4">
      <Navbar :items="navItems" v-model="activeTab" />
      <!-- 子路由内容 -->
      <router-view></router-view>
    </div>
  </div>
</template>
